<template>
    up
    <div style="width: 100%; box-shadow: var(--el-border-color-light) 0px 0px 10px">
        <el-splitter>
            <el-splitter-panel :size="'80%'" style="height: 850px; padding: 10px;">
                <div class="demo-panel">
                    <el-row :gutter="24">
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                <el-form-item label="简历信息" label-position="top"
                                    :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                    <div class="progress-bar">
                                        <div class="progress"></div>
                                    </div>
                                </el-form-item>

                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light">
                                <el-form-item label="发放时间" label-position="top" required>
                                    <el-input v-model="atime" clearable style="width: 260px;" disabled />

                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="offer状态" label-position="top" disabled>
                                    <el-select v-model="OfferData" placeholder="选择状态" style="width: 260px">
                                        <template #label="{ label, value }">
                                            <span style="font-weight: bold">{{ label }}</span>
                                        </template>
                                        <el-option v-for="item in OfferStatusData" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                <el-form-item label="候选人报道信息" label-position="top"
                                    :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                    <div class="progress-bar">
                                        <div class="progress"></div>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="选择候选人" label-position="top">
                                    <el-button type="primary" style="width: 260px;"
                                        @click="JobPopUpWindow"><icon-storage />{{
                                            CandidateName }}</el-button>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="所属需求编号"
                                    label-position="top" required>
                                    <el-input v-model="ResumeRequirements" style="width: 260px;" clearable disabled />
                                </el-form-item>
                            </div>
                        </el-col>

                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="简历信息" label-position="top"
                                    required>
                                    <div class="el-form-item__content">

                                        <el-input v-model="TalentResumeID" style="width: 260px" disabled />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="候选人姓名"
                                    label-position="top" required>
                                    <div class="el-form-item__content">

                                        <el-input v-model="CandidateName" style="width: 260px" disabled />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="offer岗位"
                                    label-position="top" required>
                                    <div class="el-form-item__content">

                                        <el-input v-model="Position" style="width: 260px" disabled />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="入职部门" label-position="top"
                                    required>
                                    <div class="el-form-item__content">
                                        <el-input v-model="deptName" style="width: 260px" disabled />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="手机号" label-position="top"
                                    required>
                                    <div class="el-form-item__content">

                                        <el-input v-model="CellPhone" style="width: 260px" clearable />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="邮箱" label-position="top"
                                    required>
                                    <div class="el-form-item__content">

                                        <el-input v-model="Mailbox" style="width: 260px" clearable />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="试用期" label-position="top"
                                    required>
                                    <div class="el-form-item__content">
                                        <el-date-picker v-model="ProbationPeriod" type="datetime" placeholder="选择日期时间"
                                            format="YYYY/MM/DD HH:mm:ss" style="width: 260px;">
                                        </el-date-picker>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="试用期薪酬（元）"
                                    label-position="top" required>
                                    <div class="el-form-item__content">

                                        <el-input v-model="ProbationarySalary" style="width: 260px" clearable />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="转正薪酬（元）"
                                    label-position="top" required>
                                    <div class="el-form-item__content">

                                        <el-input v-model="Salary" style="width: 260px" clearable />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="报到日期" label-position="top"
                                    required>
                                    <div class="el-form-item__content">
                                        <el-date-picker v-model="ReportedDate" type="datetime" placeholder="选择日期时间"
                                            format="YYYY/MM/DD HH:mm:ss" style="width: 260px;">
                                        </el-date-picker>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="报道地址报道地址"
                                    label-position="top" required>
                                    <div class="el-form-item__content">
                                        <el-input v-model="ReportingAddress" style="width: 260px;" clearable></el-input>

                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                <el-form-item label="报道联系人" label-position="top"
                                    :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                    <div class="progress-bar">
                                        <div class="progress"></div>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="联系人姓名"
                                    label-position="top" required>
                                    <div class="el-form-item__content">

                                        <el-input v-model="CandidateName" style="width: 260px" disabled />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col><el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="联系人电话"
                                    label-position="top" required>
                                    <div class="el-form-item__content">

                                        <el-input v-model="CellPhone" style="width: 260px" disabled />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="24">
                            <!--  -->
                            <div class="grid-content ep-bg-purple-light">
                                <el-descriptions :column="1">
                                    <el-descriptions-item label="">
                                        {{ CandidateName }} 先生/女士：
                                    </el-descriptions-item>
                                    <el-descriptions-item label="">
                                        您好！
                                    </el-descriptions-item>
                                    <el-descriptions-item label="">
                                        非常高兴地通知您，公司已决定录用您至 {{ deptName }} 部门任 {{ Position }}
                                        岗位。根据公司相关规定，您的薪酬及福利标准如下：试用薪酬（税前） ¥{{
                                            ProbationarySalary }}
                                        ；转正薪酬（税前） ¥{{ Salary }} 。
                                    </el-descriptions-item>
                                    <el-descriptions-item label="">
                                        报到日期： {{ ReportedDate }} （逾期未报到的，该offer将自动失效。）
                                    </el-descriptions-item>
                                    <el-descriptions-item label="">
                                        报道地址 ：{{ ReportingAddress }} 。
                                    </el-descriptions-item>
                                    <el-descriptions-item label="">
                                        附：为了您顺利地完成入职手续的办理，您还需提前准备如下资料并在入职当天提交：
                                    </el-descriptions-item>
                                    <el-descriptions-item label="">
                                        1、两寸彩色照片一张；
                                    </el-descriptions-item>
                                    <el-descriptions-item label="">
                                        2、离职证明；
                                    </el-descriptions-item>
                                    <el-descriptions-item label="">
                                        3、身份证、学位证书复印件1份（身份证复印件2份）；
                                    </el-descriptions-item>
                                    <el-descriptions-item label="">
                                        报道地址 ：{报到地址} 。
                                    </el-descriptions-item>
                                    <el-descriptions-item label="">
                                        4、户口簿【首页+本人页】复印件1份；

                                    </el-descriptions-item>
                                    <el-descriptions-item label="">
                                        5、工商银行卡【发放工资用】；

                                    </el-descriptions-item>
                                    <el-descriptions-item label="">
                                        6、员工自备笔记本电脑。研发人员自备笔记本要求8G内存，SSD硬盘，如需公司配备请提前告知。
                                    </el-descriptions-item>
                                    <el-descriptions-item label="">
                                        7、医院体检报告。
                                    </el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </el-col>

                        <!--  -->
                        <el-col :span="24">
                            <hr>
                            <div class="grid-content ep-bg-purple-light"><el-descriptions title="" :column="2"
                                    direction="horizontal">
                                    <el-descriptions-item label="提交人："> <el-text class="mx-1"
                                            type="primary">早濑优香</el-text></el-descriptions-item>
                                    <el-descriptions-item label="提交时间：">2025年7月4日16:00:45</el-descriptions-item>
                                    <el-descriptions-item label="更新时间："
                                        :span="2">2025年7月4日16:00:45</el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </el-col>
                    </el-row>
                </div>

            </el-splitter-panel>
            <!--  -->
            <el-splitter-panel :max="260">
                <div class="demo-panel" style="padding: 6px;">
                    <el-tabs v-model="DefaultDataComments" tab-position="top" @tab-click="DataComment">
                        <el-tab-pane label="数据日志" name="first">
                            <div class="card-container">
                                <el-card style="width: 250px;">
                                    <el-row :gutter="24">
                                        <el-col :span="12"></el-col>
                                        <el-col :span="12" style="font-size: 10px;">2025-07-09 09:45</el-col>
                                        <el-col :span="12" style="font-size: 12px;">早濑优香</el-col>
                                        <el-col :span="12" style="font-size: 12px;">修改</el-col>
                                        <el-col :span="12" style="font-size: 12px;"><el-icon>
                                                <Tickets />
                                            </el-icon>简历状态：</el-col>
                                        <el-col :span="12" style="font-size: 12px;"></el-col>
                                        <el-col :span="12" style="font-size: 12px;"><el-button type="danger"
                                                size="small" plain round
                                                class="line-through-btn">修改</el-button></el-col>
                                        <el-col :span="12" style="font-size: 12px;"></el-col>
                                        <el-col :span="12" style="font-size: 12px;"><el-button type="success"
                                                size="small" plain round
                                                class="line-through-btn">修改</el-button></el-col>

                                    </el-row>

                                </el-card>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="评论" name="second">
                            <div style="height: 600px; position: relative;"> <!-- 父级设置相对定位 -->
                                <a-empty style="
                                    position: absolute; /* 子元素绝对定位 */
                                    top: 50%;          /* 垂直方向距离顶部50% */
                                    left: 50%;         /* 水平方向距离左侧50% */
                                    transform: translate(-50%, -50%); /* 向左、向上偏移自身50%，实现精准居中 */
                                    " />
                            </div>
                            <div style="display: flex; justify-content: center; width: 100%;">
                                <el-input placeholder="留下你的精彩评论吧(Ctrl+Enter：发送)" clearable
                                    style="width: 250px; font-size: 12px;" />
                            </div>
                        </el-tab-pane>
                    </el-tabs>

                </div>
            </el-splitter-panel>
        </el-splitter>
    </div>
    <!--  -->
    <el-dialog title="选择简历数据" v-model="IntentionDisplay" width="60%" destroy-on-close>

        <el-table :data="IntentionData" border>
            <!-- 单选列 -->
            <el-table-column label="选择" width="60" fixed="left">
                <template #default="scope">
                    <el-radio v-model="selectedRowId" :label="scope.row.candidateid">
                        <span class="radio-custom"></span>
                    </el-radio>
                </template>
            </el-table-column>
            <!-- 固定岗位名称列 -->
            <el-table-column prop="resumeRequirements" label="需求编号" width="120" fixed="left" />
            <el-table-column prop="candidateid" label="简历编号" width="120" fixed="left" />
            <el-table-column v-for="col in columns" :prop="col.id" :key="col.id" :label="col.label" :width="col.width">
            </el-table-column>
        </el-table>

        <span>
            <el-button @click="IntentionToCancel">取消</el-button>
            <el-button type="primary" @click="IntentionConfirmed">确认</el-button>
        </span>
    </el-dialog>

</template>
<script setup lang="ts">
import request from '@/api/request'
import { ref, unref, defineProps } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ClickOutside as vClickOutside } from 'element-plus'

const number = defineProps(["data"]) // 接收父组件传来的数据
const getTime = new Date().getTime()// 获取当前时间
const time = new Date(getTime)//创建一个日期对象
// 获取当前时间
function newDate(time) {
    const year = time.getFullYear() // 获取年份
    const month = time.getMonth() + 1
    const day = time.getDate()
    return `${year}-${month}-${day}`
}
// 获取当前时间
const atime = newDate(time)

const buttonRef = ref()
const popoverRef = ref()
const DefaultDataComments = ref('first')//数据评论默认值 


const OfferData = ref("")
const OfferStatusData = ref([
    { value: '待入职', label: '已发放offer' },
    { value: '待发offer', label: '待发offer' },
])
const IntentionDisplay = ref(false)
const IntentionData = ref([])// 选择简历数据
// 候选人弹窗岗位弹窗
const JobPopUpWindow = () => {
    IntentionDisplay.value = true
    request({
        url: '/candidateresume/queryStatus',
        method: 'get',
        params: {}
    })
        .then(res => {
            console.log("简历数据", res.data);
            IntentionData.value = res.data

            // 如果DataInformation中已有resumeRequirements，则默认选中对应的行
            if ( DataInformation.value.applicantId) {
                const matchedRow = res.data.find(row => 
                    row.candidateid === DataInformation.value.applicantId
                    
                );
                if (matchedRow) {
                    selectedRowId.value = matchedRow.candidateid; // 设置默认选中行
                    
                }
                
            }
        })
}



const columns = [

    { id: "intendedPosition", label: '意向岗位', width: '160' },
    { id: "typeofjobapplication", label: '应聘类型', width: '160' },
    { id: "candidatename", label: '姓名', width: '160' },
    { id: "gender", label: '性别', width: '160' },
    { id: "cellPhone", label: '手机', width: '160' },
    { id: "mailbox", label: '邮箱', width: '160' },
    { id: "resumeStatus", label: '简历状态', width: '160' },
]


// 选择简历数据取消
const IntentionToCancel = () => {
    IntentionDisplay.value = false
}

const selectedRowId = ref(null) // 保存当前选中行
const DistributionTime = ref("")//发放时间
const CandidateName = ref("") // 姓名
const ResumeRequirements = ref('') // 需求
const TalentResumeID = ref("") //简历编号
const CellPhone = ref("")//手机号
const Mailbox = ref("") // 邮箱
const Position = ref("") //岗位
const deptName = ref("") //部门
const Salary = ref("") // 薪资
const ProbationPeriod = ref("") //试用期
const ProbationarySalary = ref("") // 试用期薪资
const ReportedDate = ref("")    //报到时间
const ReportingAddress = ref(" ") //报到地址
const OfferStatus = ref() // Offer数据



// 简历岗位确定确定
const IntentionConfirmed = () => {
    console.log('当前选中的ID:', selectedRowId.value);
    const selectedRow = IntentionData.value.find(row => row.candidateid === selectedRowId.value);
    if (selectedRow) {
        console.log('选中的数据:', selectedRow);
        ResumeRequirements.value = selectedRow.resumeRequirements;//需求编号
        TalentResumeID.value = selectedRow.candidateid; //简历编号
        DistributionTime.value = selectedRow.dateofresumeaddition;//发放时间
        CandidateName.value = selectedRow.candidatename; // 姓名
        CellPhone.value = selectedRow.cellPhone; // 手机号
        Mailbox.value = selectedRow.mailbox; // 邮箱
        Position.value = selectedRow.intendedPosition;// 职位
        deptName.value = selectedRow.department.deptName;//部门
        Salary.value = selectedRow.Salary; // 薪资
        ProbationarySalary.value = selectedRow.ProbationarySalary;//试用期薪资
        ReportedDate.value = selectedRow.ReportedDate; //报到时间
        ReportingAddress.value = selectedRow.ReportingAddress;//报到地址


    } else {

        ElMessage.error('未找到匹配的行');
    }

    IntentionDisplay.value = false
}

// 点击外部关闭
const onClickOutside = () => {
    unref(popoverRef).popperRef?.delayHide?.()
    console.log("点击了");
}



const DataComment = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
//简历信息   
const DataInformation = ref({
    applicantId: '',
    offerStatus: '',
    candidateresume: {
        intendedPosition: '',
        typeofjobapplication: '',
        candidatename: '',
        gender: '',
        cellPhone: '',
        dateOfBirth: '',
        age: '',
        degree: '',
        specialized: '',
        graduationTime: '',
        school: '',
        marriageAndChildbearing: '',
        lastWork: '',
        resumeStatus: '',
        mailbox: '',
        screenpeople: '',

    }, department: {
        deptName: '',
    },
    distributionTime: '',
    offerid: '',
    probationPeriod: '',
    probationarySalary: '',
    recruitmentPositions: '',
    remark: '',
    reportedDate: '',
    reportingAddress: '',
    salary: '',
    senderBy: '',
    submit: '',
    theLocationNumber: '',

});

const resumeInformation = () => { //获取简历信息
    request({
        url: '/offermanagementtable/finfindByResumeId',
        method: 'get',
        params: { applicanId: number.data }
    })
        .then(res => {
            DataInformation.value = res.data
            console.log('DataInformation', DataInformation.value);
            OfferData.value = DataInformation.value.offerStatus //Offer数据
            DistributionTime.value = DataInformation.value.distributionTime
            CandidateName.value = DataInformation.value.candidateresume.candidatename //姓名
            ResumeRequirements.value = DataInformation.value.theLocationNumber //需求编号
            TalentResumeID.value = DataInformation.value.applicantId  //简历编号
            CellPhone.value = DataInformation.value.candidateresume.cellPhone //手机
            Mailbox.value = DataInformation.value.candidateresume.mailbox //邮箱
            Position.value = DataInformation.value.candidateresume.intendedPosition //职位
            deptName.value = DataInformation.value.department.deptName //部门
            Salary.value = DataInformation.value.salary //薪资
            ProbationPeriod.value = DataInformation.value.probationPeriod //试用期
            ProbationarySalary.value = DataInformation.value.probationarySalary //试用期薪资
            ReportedDate.value = DataInformation.value.reportedDate //报到时间
            ReportingAddress.value = DataInformation.value.reportingAddress //报到地址
        })
}
resumeInformation()
</script>

<style scoped>
/* 外层容器，可控制整体条的高度、圆角等 */
.progress-bar {
    height: 6px;
    background-color: #ccebf7;
    border-radius: 3px;
    display: flex;
    width: 100%;
    /* 确保进度条容器宽度占满父容器 */
    overflow: hidden;
    /* 防止子元素溢出 */
}

.progress {
    width: 8%;
    height: 10;
    background-color: #61c3ea;
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
    /* 添加宽度变化的过渡效果 */
}



/* 单选框选中样式 */
.el-radio.is-checked .radio-custom {
    background-color: #61c3ea;
    border-color: #409EFF;
}

.card-container {
    display: flex;
    /* 卡片排列方式 */
    flex-wrap: wrap;
    /* 卡片之间的间距 */
    justify-content: center;
    /* 居中 */
}

/* 删除按钮样式 */
.line-through-btn {
    text-decoration: line-through;
}
</style>